<template>
    <header  class="login-header">

        <div class="left-content">
            <slot name="left"></slot>
        </div>

        <div class="center-content">
            <template v-if="title">
                {{title}}
            </template>

            <template v-else>
                <slot ></slot>
            </template>
        </div>

        <div class="right-content">
            <slot name="right"></slot>
        </div>

    </header>
</template>

<script>
    export default {
        name: 'login-header',
        props:{
            title:{
                required:false,
                default:()=>undefined
            }
        },
        data() {
            return {
                
            }
        }
    }
</script>

<style lang="less" scoped>
    .login-header{
        min-height: 50px;
        width: 100%;
        background-color: #333333;
        color:#f3f3f3;
        position: relative;

        .fengz{
            text-align: center;

            position: absolute;
            height:50px;
            line-height: 50px;
            font-size: 18px;
        }

        .left-content{
            left: 0;
            width: 50px;
            .fengz();
        }

         .right-content{
            right: 0;
           min-width: 50px;
           padding: 0px 3px;
            .fengz();
        }

         .center-content{
            left:50px;
            width: calc(100% - 100px);
            .fengz();
        }
    }
</style>